<template>
    <el-dialog
        v-model="dialogVisible"
        class="dialog dialog-animation default"
        :close-on-click-modal="true"
        @close="
        () => { emits('close') }"
    >
    <template #header>
        <div
        class="dialogHeader"
        >
        {{ props.title }}
        <slot name="header"></slot>
        </div>
    </template>
    <slot></slot>
    </el-dialog>
</template>
<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '工具'
    }
})

const emits = defineEmits(["close", "update:visible"]);

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emits("update:visible", val);
  },
});
</script>
<style lang="scss" scoped>
// 全局修改关闭按钮样式
.el-dialog__headerbtn .el-dialog__close,
.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  opacity: 0;
}

@keyframes dialog-fade-in {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 进入的过渡效果 */
.dialog-animation {
  animation: dialog-fade-in 1s ease-in;
}

.dialog {
  position: absolute;
  z-index: 999999;
  margin: 0;
  padding: 0;
  
  .dialogHeader {
    background-image: url('./dialogHeader.png');
    height: 72px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Alimama ShuHeiTi;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: bottom;
    }
}

</style>